<script setup lang="ts">
import {} from "vue";
import { QTh, QIcon, QSpace } from "quasar";

import { Sortable } from "qqlx-core";
import {} from "qqlx-cdk";

const vueProps = defineProps<{
  sortor: Sortable;
  active: boolean;
  label: string;
  isRight?: boolean;
}>();
</script>

<template>
  <q-th class="cursor-pointer text-secondary">
    <div v-if="vueProps.active" class="flex flex-nowrap items-center text-primary font-semibold">
      <q-space v-if="vueProps.isRight"></q-space>
      <span>{{ vueProps.label }}</span>
      <q-icon :name="vueProps.sortor === Sortable.ASC ? 'arrow_drop_up' : 'arrow_drop_down'" size="sm" class="-mr-1"></q-icon>
    </div>
    <div v-else class="flex flex-nowrap items-center gap-1">
      <q-space v-if="vueProps.isRight"></q-space>
      <span>{{ vueProps.label }}</span>
      <q-icon name="filter_list" size="xs" class="-mr-1"></q-icon>
    </div>
  </q-th>
</template>

<style scoped>
:deep(.q-table th) {
  font-weight: normal;
}
</style>
